<template>
	<view class="fs-26 tab-bar-wrap dis-flex lh-1 ta-c tab-bar-bg shadow-normal center">
		<view v-for="(item,index) in menuData" :key="index" :class="currentMenu==index?'tab-bar-on':''" :style="{width:750/menuData.length+'rpx'}" @click="tabBarTap(index)">
			<view class="pos-r dis-ib">
				<text class="badge" v-if="item.badge">{{item.badge}}</text>
				<image :src="currentMenu==index?item.selectedIconPath:item.iconPath" class="img-50-50"></image>
			</view>
			<view class="lh-1d5">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits:['tabBarTap'],
		props:{
			menuData:{
				type:Array,
				default:()=>{
					return []
				}
			},
			currentMenu:{
				type:Number||String,
				default:0
			}
		},
		methods:{
			tabBarTap(index){
				this.$emit('tabBarTap',index)
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar-wrap{
		height: $tab-bar-height;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		color:#8E8E93;
		box-sizing: content-box;
		z-index:996;
		
		.tab-bar-on{
			color:$se-main;
			font-weight: bold;
		}
	}
	.tab-bar-bg{
		background:#fff
	}
</style>
